
@layer component {
  .player {
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin: 1em 0;
    
    video {
      border-radius: var(--radius-m);
      max-width: 100%;
    }

    .icon {
      color: black;
      position: absolute;
      cursor: pointer;
    }

    .play {
      align-self: center;
      stroke-width: 1.25;
      fill: white;
      width: 4em;
    }

    &:not(.paused) .play {
      display: none;
    }

    .maximize {
      top: 1em;
      right: 1em;
      z-index: 1;
    }
  }
}
